<template>
    <div style="width:300px;margin:0 auto;padding-top:10%;">
        <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
            <FormItem label="原始密码" prop="old_passwd">
                <Input type="password" v-model="formCustom.old_passwd" placeholder="请输入原始密码"></Input>
            </FormItem>
            <FormItem label="新密码" prop="passwd">
                <Input type="password" v-model="formCustom.passwd" id='password' placeholder="请输入新密码"></Input>
            </FormItem>
            <FormItem label="确认密码" prop="passwdCheck">
                <Input type="password" v-model="formCustom.passwdCheck" placeholder="请再次输入新密码"></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formCustom')">确定</Button>
                <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">重置</Button>
            </FormItem>
        </Form>
    </div>
</template>

<script>
import Cookies from 'js-cookie';
import Member from "@/common/model/Member";
    export default {
        name: "ModifyPassword",
        data () {
            const validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('*请输入新密码！'));
                } else {
                    if (this.formCustom.passwdCheck !== '') {
                        // 对第二个密码框单独验证
                        this.$refs.formCustom.validateField('passwdCheck');
                    }
                    callback();
                }
            };
            const validatePassCheck = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('*请再次输入新密码！'));
                } else if (value !== this.formCustom.passwd) {
                    callback(new Error('*两次输入的密码不一致，请重新输入!'));
                    this.formCustom.passwd="";
                    this.formCustom.passwdCheck="";
                    //document.getElementById('password').autofocus=true;//没有效果
                    //this.formCustom.passwd.autofocus=true;
                } else {
                    callback();
                }
            };
            const validateAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('*原始密码不能为空'));
                }else{
                    callback();
                }
                
            };
            
            return {
                formCustom: {
                    old_passwd: '',
                    passwd: '',
                    passwdCheck: ''    
                },
                ruleCustom: {
                    old_passwd: [
                        { validator: validateAge, trigger: 'blur' }
                    ],
                    passwd: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    passwdCheck: [
                        { validator: validatePassCheck, trigger: 'blur' }
                    ]
                }
            }
        },
        computed:{
            userInfo() {
                return this.$store.state.user.info;
            }
        },
        methods: {
            handleSubmit (formCustom) {
                //前台输入原始密码以及新密码
                //key-value 的形式传到后台
                //后台接受前台通过接口传入的数据，根据UserCode得到当前对象，判断输入的原始密码与数据库中的是否相符。
                this.$refs[formCustom].validate( valid => {
                    if(valid) {           
                        this.api.post('member/update_pwd', {
                            old_password: this.formCustom.old_passwd, 
                            new_password: this.formCustom.passwd
                        }, res => {
                            this.$CustomMessage.success('*密码重置成功！');
                            this.$emit("on-pwdChange",this.userInfo);
                        });
                    }else {
                        this.$CustomMessage.error('*请按要求填写信息！');
                    }
                });
            },
            handleReset (name){
                this.$refs[name].resetFields();
            }
        }
    }
</script>